'use client'

import { useState, useEffect } from 'react'
import { SearchBar } from './search-bar'

interface Category {
  id: string
  name: string
  icon: string
  description: string
  _count?: {
    tools: number
  }
}

export function SearchSection() {
  const [categories, setCategories] = useState<Category[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchCategories()
  }, [])

  const fetchCategories = async () => {
    try {
      const response = await fetch('/api/categories')
      const result = await response.json()
      
      if (response.ok) {
        setCategories(result.data || [])
      } else {
        console.error('获取分类失败:', result.error)
      }
    } catch (error) {
      console.error('获取分类失败:', error)
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return (
      <div className="animate-pulse">
        <div className="h-12 bg-gray-200 rounded-lg mb-4"></div>
        <div className="flex gap-2">
          {Array.from({ length: 5 }).map((_, i) => (
            <div key={i} className="h-8 w-20 bg-gray-200 rounded"></div>
          ))}
        </div>
      </div>
    )
  }

  return <SearchBar categories={categories} />
}
